<template>
    <a-spin :spinning="spinning" :delay="delayTime">
      <div class="spin-content">
        <div id="groupId" style="height: 400px;width: 100%;"></div>
      </div>
    </a-spin>
</template>

<script>
  import * as echarts from 'echarts';
  import { getInviteUsers } from "../../serves";

  export default {
    props: {
      showGroupData: {
        type: String,
        default: ''
      }
    },
    watch: {
      showGroupData(val) {
        this.getTreeData(val)
      }
    },
    data() {
      return {
        delayTime: 0,
        spinning: false
      };
    },
    mounted() {
    },
    methods: {
      getTreeData(id) {
        let params = {
          userId: id
        }
        this.spinning = true;
        getInviteUsers(params).then(res => {
          let treeData = {}
          if (res.status == 200 && res.data.status.code == 200) {
            treeData.name = res.data.data.user.username
            treeData.collapsed = false
            treeData.children = []
            if (res.data.data.inviteesUsers) {
              res.data.data.inviteesUsers.forEach(el => {
                treeData.children.push({
                  name: el.username,
                  value: ''
                })
              })
            }
            this.drawLine(treeData)
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
          this.spinning = false;
        })
      },
      drawLine(data) {
        let myChart = echarts.init(document.getElementById('groupId'));
        let option = {
          tooltip: {
            show: false,
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: [data],
              top: '1%',
              left: '10%',
              bottom: '1%',
              right: '20%',
              symbolSize: 7,
              label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 14
              },
              leaves: {
                label: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              },
              emphasis: {
                focus: 'descendant'
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        };
        myChart.setOption(option, true);
      }
    }
  };
</script>

<style lang="scss"></style>
